<template>
	<view class="page">

		<view class="publish-demand-wrapper">

			<view style="display: flex;flex-direction: row;align-items: center;
		margin-left: 12upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;">
				<view style="display: flex;align-items: center;">
					<image style="width: 16upx;height: 16upx;" src="" mode="">
					</image>
					<span style="color: #191919;font-size: 28upx;margin-left: 18upx;">姓名</span>
				</view>
				<input type="text" style="text-align: right;width: 70%;color: #191919;" maxlength="15" v-model="formData.name"
					placeholder="请输入姓名" />
			</view>


			<view style="display: flex;flex-direction: row;align-items: center;
		margin-left: 12upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;">
				<view style="display: flex;align-items: center;">
					<image style="width: 16upx;height: 16upx;" src="" mode="">
					</image>
					<span style="color: #191919;font-size: 28upx;margin-left: 18upx;">工作经验</span>
				</view>
				<input type="text" style="text-align: right;width: 70%;color: #191919;" maxlength="15" v-model="formData.experience"
					placeholder="请输入工作经验" />
			</view>

			<view style="display: flex;flex-direction: row;align-items: center;
		margin-left: 12upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;">
				<view style="display: flex;align-items: center;">
					<image style="width: 16upx;height: 16upx;" src="" mode="">
					</image>
					<span style="color: #191919;font-size: 28upx;margin-left: 18upx;">价格</span>
				</view>
				<input type="text" style="text-align: right;width: 70%;color: #191919;" maxlength="15" v-model="formData.price"
					placeholder="请输入价格" />
			</view>



			<view style="display: flex;flex-direction: row;align-items: center;
		margin-left: 12upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;">
				<view style="display: flex;align-items: center;">
					<image style="width: 16upx;height: 16upx;" src="" mode="">
					</image>
					<span style="color: #191919;font-size: 28upx;margin-left: 18upx;">手机号</span>
				</view>
				<input type="text" style="text-align: right;width: 70%;color: #191919;" maxlength="15" v-model="formData.mobile"
					placeholder="请输入手机号" />
			</view>



			<view style="display: flex;flex-direction: row;align-items: center;
		margin-left: 12upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;">
				<view style="display: flex;align-items: center;">
					<image style="width: 16upx;height: 16upx;" src="" mode="">
					</image>
					<span style="color: #191919;font-size: 28upx;margin-left: 18upx;">身份证</span>
				</view>
				<input type="text" style="text-align: right;width: 70%;color: #191919;" maxlength="15" v-model="formData.idCard"
					placeholder="请输入身份证" />
			</view>

		</view>


		<view style="background: #FFFFFF;margin-top: 30upx;">

			<textarea style="padding: 30upx 0 0 30upx;color: #191919;height: 272upx;width: 95%;" maxlength="1000"
				v-model="formData.specialty" value="" placeholder="请输入个人介绍~(必填)" />
			<view style="margin-left: 30upx;">
				<view style="color: #B7B8BB;font-size: 28upx;">请上传健康证(必填)</view>
			</view>

			<view style="display: flex;flex-direction: row;align-items: center;">
				<image style="width: 160upx;height: 160upx;margin-top: 26upx;margin-bottom: 30upx;margin-left: 30upx;"
					src="../../static/img/publish-img-icon.png" mode="" @click="uploadImgLocal"></image>
				<view style="display: flex;flex-direction: row;position: relative;"
					v-for="(item,index) in uploadImgList" :key="index">


					<image :src="item" @tap="previewImg(index)"
						style="width: 160upx;height: 160upx;border-radius: 12upx;margin-left: 16upx;" mode="aspectFill">
					</image>
					<view style="background: #000000;border-radius: 16upx;width: 32upx;height: 32upx;line-height: 32upx;
					position: absolute;left: 75%;top: 8%;
					text-align: center;opacity:0.6" @click="removeImg(index)">
						<span style="color: #FFFFFF;width: 14upx;height: 14upx;">×</span>
					</view>
				</view>

			</view>

		</view>




		<view style="position: fixed;bottom: 0upx;margin-bottom: 68upx;padding: 0 30upx;" @click="publish">
			<view style="width: 690upx;height: 80upx;background: #E9A06F;border-radius: 40upx;
			text-align: center;line-height: 80upx;">提交</view>
		</view>

	</view>
</template>

<script>
	// import {food_type_list} from '../../api/food_type.js'
	// import {food_category_list} from '../../api/food_category.js'
	import {
		publish_content
	} from '../../api/ap_content.js'

	import {
		chef_verify
	} from '../../api/chef.js'




	function getDate(type) {
		const date = new Date();

		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;

		return `${year}-${month}-${day}`;
	}
	export default {
		data() {
			return {
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				isLogin: false,
				mobile: "",
				email: "",
				wechatAccount: "",
				qqAccount: "",
				subject: "",
				title: "",
				cookTime: "",
				selectCategroy: "",
				isAuth: 2,
				isTechAuth: 2,
				categoryId: '',
				estimate: 0,
				techType: 0,
				estimateList: [],
				foodTypeList: [],
				categoryList: [],
				estimateAmountId: 1,
				name: '',
				techTypeId: 1,
				foodTypeId: '',
				selectFoodType: '',
				date: getDate({
					format: true
				}),
				startDate: getDate('start'),
				endDate: getDate('end'),
				uploadImgList: [],
				imgList: [],
				formData: {}
			}
		},

		onShow() {



		},
		methods: {

			verify() {
				let params = this.formData
				chef_verify(params).then(res => {

				})

			},



			previewImg(index) {
				console.log("index:" + index)
				let _this = this;
				let imgsArray = [];
				for (let i = 0; i < this.uploadImgList.length; i++) {
					imgsArray.push(this.uploadImgList[i]);

				}
				uni.previewImage({
					current: index,
					urls: imgsArray,
					indicator: 'number',
					loop: true,
					longPressActions: {
						itemList: ['保存图片'],
						success(res) {
							console.log(res)
							uni.downloadFile({
								url: this.uploadImgList[index],
								success(result) {
									uni.saveImageToPhotosAlbum({
										filePath: result.tempFilePath,
										success() {
											uni.showToast({
												title: '保存成功'
											})
										}
									})
								}
							})
						}
					}
				});
			},
			removeImg(index) {
				console.log("index:" + index)
				var temArray = []
				for (var i = 0; i < this.uploadImgList.length; i++) {
					if (i !== index) {
						temArray.push(this.uploadImgList[i])
					}
				}
				this.uploadImgList = temArray

			},
			uploadImgLocal() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths)
						this.uploadImgList = tempFilePaths
					}
				})
			},
			uploadImgs() {
				const arr = []

				const _this = this
				for (var i = 0; i < this.uploadImgList.length; i++) {
					const a = new Promise(reslut => {
						uni.uploadFile({
							url: 'http://localhost:8901/common/upload/file',
							filePath: this.uploadImgList[i],
							name: 'file',
							success(res) {
								_this.imgList.push(JSON.parse(res.data).data)
								reslut()
							}
						})
					})
					arr.push(a)
				}
				return Promise.all(arr)
			},
			publish() {
				let params = this.formData
				uni.showLoading({
					title: '发布中~',
					mask: true
				})
				this.uploadImgs().then(() => {
					params.healthCardList = this.imgList
					chef_verify(params).then(res => {
						if (res.code === '200') {
							uni.hideLoading()
							uni.showToast({
								title: '提交成功'
							})

						}
					})
				})
			},

			bindDateChange: function(e) {
				this.date = e.detail.value;
			},
			getFoodTypeList() {
				food_type_list().then(res => {
					if (res.status === 200) {
						console.log(res)
						this.foodTypeList = res.data
					}

				})
			},
			getFoodCategoryList() {
				food_category_list().then(res => {
					if (res.status === 200) {
						console.log(res)
						this.categoryList = res.data
					}

				})
			},
			getTechTypeList() {
				techType_pull().then(res => {
					if (res.status === 200) {
						this.techTypeList = res.data
					} else if (res.status === 401) {
						uni.navigateTo({
							url: '../login/login'
						})
					}

				})
			},

			linkPublishSuccess() {
				uni.navigateTo({
					url: "../publish-demand-success/publish-demand-success"
				})
			},
			bindPickerChange: function(e, estimateList) {
				const index = e.target.value
				this.selectFoodType = this.foodTypeList[index].name
				this.foodTypeId = this.foodTypeList[index].id
			},
			bindTechTypePickerChange: function(e) {
				const index = e.target.value
				this.selectCategroy = this.categoryList[index].name
				this.categoryId = this.categoryList[index].id
			}

		}
	}
</script>

<style>
	.page {
		color: #F8F8F8;
	}

	.publish-demand-wrapper {
		display: flex;
		flex-direction: column;
		margin-top: 24upx;
		background: #FFFFFF;
	}
</style>